<template>
  地区：&nbsp;&nbsp;&nbsp;&nbsp;
  <select name="provinceCode" v-model="provinceCode">
    <option v-for="province in provinces" :value="province.regionCode" v-text="province.regionName"></option>
  </select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <select name="cityCode" v-model="cityCode">
    <option v-for="city in cities" :value="city.regionCode" v-text="city.regionName"></option>
  </select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <select name="districtCode" v-model="districtCode">
    <option v-for="district in districts" :value="district.regionCode" v-text="district.regionName"></option>
  </select>
</template>
<script setup>

import {computed, reactive, ref, toRaw, watch} from "vue";
import {useStore} from "vuex";

const provinceCode = ref(0);
const cityCode = ref(0);
const districtCode = ref(0);

const store = useStore();
store.dispatch('getProvinces');
// 更新省份
const provinces = reactive(computed(function () {
  const provinceList = toRaw(store.state.provinces);
  if (provinceList[0]) {
    provinceCode.value = provinceList[0].regionCode;
  }
  return provinceList;
}));
// 更新城市
watch(provinceCode, function (value) {
  store.commit({
    type: 'updateCities',
    regionCode: value
  });
});
const cities = reactive(computed(function () {
  const cityList = toRaw(store.state.cities);
  if (cityList[0]) {
    cityCode.value = cityList[0].regionCode;
  }
  return cityList;
}));
// 更新区县
watch(cityCode, function (value) {
  store.commit({
    type: 'updateDistricts',
    provinceCode: provinceCode.value,
    cityCode: value
  });
});
const districts = reactive(computed(function () {
  const districtList = toRaw(store.state.districts);
  if (districtList[0]) {
    districtCode.value = districtList[0].regionCode;
  }
  return districtList;
}));
</script>
<script>
export default {
  name: "LhzB"
}
</script>

<style scoped>

</style>